<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue/vue.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			li{
				width: 100%;
				height: 40px;
				border-top: 1px solid #eee;
				line-height: 40px;
				padding: 0 10px;
				box-sizing: border-box;
			}
			li:nth-last-child(1){
				border-bottom: 1px solid #eee;
			}
			span{
				color: #333;
				font-size: 12px;
				float: right;
			}
			label{
				display: block;
				padding: 10px;
			}
			input,
			textarea{
				width: 100%;
				padding: 8px;
				box-sizing: border-box;
				border: 1px solid #ccc;
				outline: none;
			}
			button{
				width: 100px;
				height: 40px;
				margin: 10px;
				line-height: 40px;
				font-size: 18px;
				text-align: center;
				border-radius: 10px;
				color: #fff;
				outline: none;
				background-color: #69f;
			}
			
			.v-enter,.v-leave-to{
	        	opacity: 0;
	        	transform: translateY(50px);
	        }
	        .v-enter-active, .v-leave-active {
				transition: .5s;
			}
			
			
			.v-move{
				transition: .5s;
			}
			.v-leave-active {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<tmp1 @func="loadComment"></tmp1>
			<transition-group tag="ul">
				<li v-for="item in list" :key="item.name">
					{{item.con}}
					<span>姓名：{{item.name}}</span>
				</li>
			</transition-group>
		</div>
		<!--组件结构-->
		<template id="tmp">
			<div>
				<label>姓名：<input type="text" v-model="name"/></label>
				<label>评论内容：<textarea v-model="con"></textarea></label>
				<button @click="postComment">发表评论</button>
				<button @click="clear">清空评论</button>
			</div>
		</template>
		
		<script type="text/javascript">
			//组件1
			var tmp1 = {
				template:"#tmp",
				data(){
					return {
						name:"",
						con:""
					}
				},
				methods:{
					//提交评论数据
					postComment(){
						//获取评论数据
						var comments = {id:Date.now(),name:this.name,con:this.con};
						//从本地文件获取评论数据
						var list = JSON.parse(localStorage.getItem('cmts')||'[]');
						//添加数据
						list.push(comments);
						//重新保存本地文件
						localStorage.setItem('cmts',JSON.stringify(list));
						//调用父方法刷新页面
						this.$emit('func');
					},
					clear(){
						//清空文件内容
						localStorage.clear();
						this.$emit('func');
					}
				}
			}
			//vue实例对象
			var vm = new Vue({
				el:"#app",
				data:{
					list:[]
				},
				methods:{
					loadComment(){
						var list = JSON.parse(localStorage.getItem('cmts')||'[]');
						this.list = list;
					}
				},
				components:{
					tmp1
				},
				created(){
					this.loadComment();
				}
			})
		</script>
	</body>
</html>
